<template>
  <div class="index-box">
      <div class="title">
          <span>商品列表</span>
      </div>
      <div class="index-middlebox">
          <div class="middle-item">
              <span>商品名称</span>
              <template>
                  <el-input class="productname-input" v-model="productname"></el-input>
              </template>
          </div>
          <div class="middle-item">
              <span>商品产地</span>
              <template>
                  <el-input class="productname-input" v-model="productOrigin"></el-input>
              </template>
          </div>
          <div class="middle-item">
              <!-- <span>入库日期</span> -->
              <template>
                    <!-- <el-date-picker
                    v-model="value"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                    </el-date-picker> -->
                  <el-button type="primary" class="search">搜索</el-button>
                  <!-- <el-button type="primary" class="search" @click="addpro">新增商品</el-button> -->
              </template>
              <el-dialog :title="title" :visible.sync="dialogTableVisible">
                <table class="table-box2">
                    <tr>
                        <td>商品名称</td>
                        <td>
                            <el-input class="productname-input" v-model="addproduct" placeholder="请输入商品名称"></el-input>
                        </td>
                        <td>总重量</td>
                        <td>
                            <el-input class="productname-input" v-model="addweight" placeholder="请输入重量"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>商品ID</td>
                        <td>
                            <el-input class="productname-input" v-model="addId" placeholder="请输入商品Id"></el-input>
                        </td>
                        <td>入库日期</td>
                        <td>
                            <el-date-picker
                            v-model="adddate"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>商品规格</td>
                        <td>
                            <el-input class="productname-input" placeholder="请输入商品规格" v-model="addsize"></el-input>
                        </td>
                        <td>保质期</td>
                        <td>
                            <el-input class="productname-input" placeholder="请输入保质期" v-model="addShelf"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>库存数量</td>
                        <td>
                            <el-input class="productname-input" placeholder="请输入库存数量" v-model="addnum"></el-input>
                        </td>
                        <td>商品产地</td>
                        <td>
                            <el-input class="productname-input" placeholder="请输入商品产地" v-model="addplace"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <el-button size="mini" type="primary" class="succeedbtn" @click="specification">确认</el-button>
                            <el-button size="mini" class="cleanbtn" @click="getcancel">取消</el-button>
                        </td>
                    </tr>
                </table>
            </el-dialog>
          </div>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        height="500"
                        border
                        style="width: 100%">
                <el-table-column type="index"
                                label="序号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="id"
                                label="商品ID"
                                 align="center"> 
                </el-table-column>
                <el-table-column prop="name"
                                label="商品名称"
                                 align="center">
                </el-table-column>
                <el-table-column prop="specification"
                                label="商品规格"
                                 align="center">
                </el-table-column>
                <el-table-column prop="weight"
                                label="总重量"
                                 align="center">
                </el-table-column>
                <el-table-column prop='address'
                                label="商品产地"
                                 align="center">
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                 align="center">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini">上架</el-button> -->
                        <el-button size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
      <div class="page-box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="1"
            :total="total">
            </el-pagination>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getqueryList, specification} from "@/api/user";
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        merchandiseList:[],
        productname:'',
        productOrigin:'',
        options: [{
          value: '选项1',
          label: '水果类'
        }, {
          value: '选项2',
          label: '蔬菜类'
        }, {
          value: '选项3',
          label: '禽蛋肉类'
        }, {
          value: '选项4',
          label: '水产类'
        }, {
          value: '选项5',
          label: '米面粮油'
        }],
        value: '',
        dialogTableVisible:false,
        addproduct:'',//新增商品名称
        addweight:'',//新增商品重量
        addId:'',//新增商品id
        adddate:'',//新增入库日期
        addsize:'',//新增商品规格
        addShelf:'',//新增保质期
        addplace:'',//新增产地
        addnum:'',//新增库存数量
        iscompile:0,//判断是编辑还是新增 0是新增 1是编辑
        specificationId:'',//规格id
        total: 0, // 用户总条数
        pagesize: 10, //每页显示多少条，默认为10条
        pageNo: 1, // 当前页码，默认为第一页
        title:'新增商品',
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getqueryList()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      getqueryList(){
        let data ={
         pageNo:this.pageNo,
         pageSize:this.pageSize
       }
        getqueryList(data).then(res =>{
            console.log(res)
            if(res.code == 20000){
                this.merchandiseList = res.rows
                this.total=res.total
            }
        })
      },
      handleEdit(index,row){
          console.log(index)
          console.log(row)
          this.iscompile = 1
          this.dialogTableVisible = true
          this.addproduct = row.name
          this.addweight = row.weight
          this.addId = row.id
          this.addsize = row.specification
          this.title = '编辑商品'
          this.specificationId = row.specificationId
      },
      //取消新增或编辑
      getcancel(){
          this.dialogTableVisible = false
          this.addproduct = ''
          this.addweight = ''
          this.addId = ''
          this.adddate = ''
          this.addsize = ''
          this.addShelf = ''
          this.addplace = ''
          this.addnum = ''
      },
      specification(){
          let iscompile = this.iscompile;
          if(iscompile == 0){

          }else if(iscompile == 1){
              let data = {
                  id:this.specificationId,
                  goodsSpecification:this.addsize,
                  goodsId:this.addId
              }
              specification(data).then(res => {
                  console.log('编辑商品',res)
                  if(res.code == 20000){
                      this.$message(res.msg)
                      this.dialogTableVisible = false
                      this.getqueryList()
                  }
              })
          }
      },
      handleSizeChange(val) {
        this.pagesize = val
        this.getqueryList()
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.getqueryList()
      },
      // 点击新增商品
      addpro(){
          this.dialogTableVisible = true
          this.title = '新增商品'
      }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .middle-item{
            span{
                font-size: 14px;
                padding-right: 30px;
                padding-left: 30px;
                box-sizing: border-box;
            }
            .productname-input{
                width: 200px;
            }
            .search{
                width: 100px;
                margin-left:20px;
            }
            .table-box2{
                width: 100%;
                border: 1px solid #000;
                border-collapse:collapse;
                background-color: #fff;
                td{
                    width: 200px;
                    height: 40px;
                    text-align: center;
                    border-bottom: 1px solid #000;
                    border-right: 1px solid #000;
                }
                .productname-input{
                    width: 250px;
                }
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .page-box{
        width: 100%;
        text-align: center;
    }
}
</style>
